<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 外边距合并</title>
    <style type="text/css">
        /*
        外边距合并指的是: 当两个垂直外边距相遇时,它们将形成一个外边距,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大值
        它们自己合并了
        */
        *{
            margin: 0px;
            padding: 0px;
            border: 0px;
        }  /* 消除 body的影响*/

        #d1{
            width: 100px;
            height: 100px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: red;
        }

        #d2{
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background-color: blue;
        }
        /*
        当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），
        它们的上和/或下外边距也会发生合并。
        */
        #outer {
            width:300px;
            height:300px;
            background-color:red;
            margin-top:20px;
        }

        #inner {
            width:50px;
            height:50px;
            background-color:blue;
            margin-top:10px;
        }
        /*  空元素的上外边距和下外边距 碰到一起也会发生合并 如果这个空元素没有边框和填充 */
        #empty{
            margin-top: 20px;
            margin-bottom: 20px;
        }
        #empty2{
            margin-top: 20px;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div id="d1">

    </div>
    <div id="d2">

    </div>
    <p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p>
    <div id="outer">
        <div id="inner">
        </div>
    </div>
    <p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
    <div id="empty">
    </div>
    <div id="empty2">
    </div>
    <p> !!!!   有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
        如果这个外边距遇到另一个元素的外边距，它还会发生合并： 所以这里empty 和 empty2 上边距是20px 而不是 60px  挺有意思!!!!
    </p>
    <p>
        外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。
        如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
    </p>
</body>
</html>